<template>
  <main class="change-multiplying">
    <div class="content">
      <div class="title">
        <div class="text">修改倍率区间</div>
      </div>
      <div class="bar-box" ref="barBox"
           @mouseup="blockMouseupHandler"
           @mousemove="blockMousemoveHandler">
        <div class="bar" ref="bar">
          <div class="block"
               ref="block"
               @mousedown="blockMousedownHandler($event,index)"
               v-for="(item,index) in barBlockList"
               :style="{left:`${item.left}`}"
               :key="index">
            <div class="tip">
              {{ item.value }}
            </div>
          </div>
        </div>
        <div class="bar-indicate">
          <div class="item" v-for="(item,index) in indicate" :key="index">
            <div class="block" :style="{backgroundColor:item.color}"></div>
            <!--第一位-->
            <div class="text" v-if="index === 0">
              {{ `0 < 倍率 <${item.value}` }}
            </div>
            <!--中位-->
            <div class="text" v-if="index >0 && index<indicate.length-1">
              {{ `${indicate[index - 1].value} < 倍率 <${item.value}` }}
            </div>
            <!--最后一位-->
            <div class="text" v-if="index === indicate.length - 1">
              {{ `${indicate[index - 1].value} < 倍率` }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="cancel btn" @click="cancelHandler">取消</div>
      <div class="confirm btn" @click="confirmHandler">确定</div>
    </div>
  </main>
</template>

<script lang="ts">
import {getPercent} from "@/utils/transform.js"

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      barBlockList: [
        {value: "0.2", left: '20%'},
        {value: "4.0", left: '40%'},
        {value: "6.0", left: '60%'},
        {value: "8.0", left: '80%'}
      ],
      indicate: [
        {color: "#BF3330", value: "0.2"},
        {color: "#A14264", value: "4.0"},
        {color: "#81529B", value: "6.0"},
        {color: "#6958C2", value: "8.0"},
        {color: "#5467e6", value: "8.0"}
      ],
      startMove: false,
      moveDomObj: null,
      barWidth: 0,
      curSlideIndex: 0
    }
  },
  mounted() {
    this.barWidth = this.$refs.bar.clientWidth;
  },
  methods: {
    cancelHandler() {
      this.$emit('update:visible', false)
      this.$emit('cancel', false)
    },
    confirmHandler() {
      this.$emit('update:visible', false)
      this.$emit('confirm', false)
    },
    blockMousedownHandler(e, index) {
      if (e.target.className === 'tip') return
      this.startMove = true;
      this.moveDomObj = e;
      this.moveDomObj.target.style.zIndex = '2';
      this.curSlideIndex = index;
    },
    blockMousemoveHandler(e) {
      if (!this.startMove) return;
      const offsetLeft = e.pageX - this.getElementLeft(this.$refs['barBox']);
      if (offsetLeft > this.barWidth || offsetLeft <= 0) return;
      this.moveDomObj.target.style.left = offsetLeft + 'px';
      const rate = getPercent(offsetLeft, this.barWidth).replace('%', '')
      this.barBlockList[this.curSlideIndex].value = (Number(rate) / 10).toFixed(1);
    },
    blockMouseupHandler() {
      this.startMove = false;
      this.$refs['block'].forEach(item => item.style.zIndex = '1');
      const copyBarBlockList = this.barBlockList.map(item => ({...item}));
      copyBarBlockList.sort((old, item) => Number(old.value) - Number(item.value));
      let old = null;
      copyBarBlockList.forEach((item, index) => {
        this.indicate[index].value = `${item.value}`;
        old = item;
      })
    },
    getElementLeft(element) {
      let actualLeft = element.offsetLeft;
      let current = element.offsetParent;
      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }
      return actualLeft;
    }
  }
}
</script>

<style scoped lang="stylus">
.change-multiplying {
  .content {
    border-radius: 12px;

    .title {
      display flex
      align-items center
      justify-content space-between

      .text {
        font-size: 14px;
        color: #4B82FB;
        line-height: 14px;
      }
    }

    .bar-box {
      height 160px
      position relative

      .bar {
        position absolute
        top 50%
        width 100%
        height 10px
        border-radius: 5px;
        background-image linear-gradient(to right, #BF3330, #5467E6)

        .block {
          position absolute
          top 50%
          transform translateX(-50%) translateY(-50%)
          width 18px
          height @width
          background-color #FFFFFF
          border 2px solid #407CFC
          border-radius 100%
          cursor pointer

          .tip {
            user-select: none;
            position absolute
            transform translateX(-50%)
            top -55px
            left 50%
            background: #FFFFFF;
            box-shadow: 0 4px 8px 0 rgba(25, 25, 26, 0.15), 0 2px 4px 0 rgba(39, 39, 42, 0.20);
            border-radius: 5px;
            width 52px
            height 40px
            font-size: 12px;
            color: #484D78;
            text-align: center;
            line-height: 40px;

            &:after {
              display: block;
              content: ""
              width 10px
              height 10px
              background-color #FFFFFF
              transform rotateZ(45deg) translateX(-50%)
              position absolute
              bottom -6px
              border-radius 2px
              left 50%
            }
          }
        }
      }

      .bar-indicate {
        position absolute
        bottom 20px
        width 100%
        display flex
        align-items center
        justify-content space-around

        .item {
          display flex
          align-items center

          .block {
            margin-right 5px
            height 10px
            width 20px
            background: #BF3330;
            border-radius: 4px;
          }

          .text {
            font-size: 12px;
            color: #484D78;
            line-height: 12px;
          }
        }
      }
    }
  }

  .footer {
    display flex
    align-items center
    justify-content center
    margin-top 26px

    .btn {
      width 80px
      height 36px
      border-radius: 12px;
      font-size: 14px;
      line-height: 36px;
      text-align center
      margin 0 12px
      cursor pointer
    }

    .cancel {
      background: #FFFFFF;
      box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
      color: #558FFF;
    }

    .confirm {
      background: #6190F7;
      box-shadow: 0 4px 8px 0 rgba(60, 106, 194, 0.15), 0 2px 4px 0 rgba(60, 106, 194, 0.30);
      color #fff
    }
  }
}
</style>
